<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渲染模板</title>
</head>
<body>
	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<span>姓名：{{name}}</span>
			<span>年龄：{{age}}</span>
			{{@ title}}
			{{if age > 18}}
			成年
			{{else}}
			未成年
			{{/if}}
			<ul>
				{{each list}}
				<li>{{$value}} --- {{$index}}</li>
				{{/each}}
			</ul>
		</div>
		{{$imports.dateformat(time)}}
		{{dateformat(time)}}
	</script>
	<script>
		// 尽量不要把东西写在全局，容易和别人写的函数冲突
		function dateformat(time){
			var date = new Date(time)
			var y = date.getFullYear()
			var m = date.getMonth()+1 
			var d = date.getDate()
			return y + '-' + m + '-' + d 
		}
		template.defaults.imports.dateformat = function(time){
			var date = new Date(time)
			var y = date.getFullYear()
			var m = date.getMonth()+1 
			var d = date.getDate()
			return y + '-' + m + '-' + d 
		}
		//真实项目中这个数据来自ajax数据
		var data = {
			name: '李四',
			age: 30,
			//html片段 默认原样输入 不会去解析 防止xss攻击（跨站脚本攻击）
			//不是用户输入的数据，我们认为这个数据是安全的，所以我们想让它解析
			title:'<h1>hello world</h1>',
			age:15,
			list:[2,3,4],
			time:1583128354925
		}

		// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
		var html = template('tpl', data);
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>